<template>
  <div id="container">
    <div class="login-box">
      <h2>Register</h2>
      <form>
        <div class="user-box">
            <input type="text" name="" required=""  v-model="user.account">
            <label>Username</label>
        </div>
        <div class="user-box">
            <input type="password" name="" required=""  v-model="user.password"  @keypress.enter="open2">
            <label>Password</label>
        </div>
      </form>
      <el-row class="mb-4">
        <el-button :plain="true" @click="returnLogin">返回登录</el-button>
        <el-button type="success" @click="register" @keypress.enter="register">注册</el-button>
      </el-row>
    </div>
  </div>
  
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive,ref,computed,watch,onMounted } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const noText = ref('')
const noPassword = ref('')

let user = reactive({
  account:undefined,
  password:undefined
})
let returnLogin = ()=> {
  router.push('/')
}
let register = ()=> {
  const { account, password } = user
  if(!account || !password){
    return ElMessage({
      dangerouslyUseHTMLString:true,
      message: '请正确输入',
      type: 'warning',
      duration: 1000,
      center: true,
  })}
  if (account == "admin" && password == 123456){
    ElMessage({
      dangerouslyUseHTMLString:true,
      message: '注册成功',
      type: 'success',
      duration: 1000,
      center: true,
      onClose:()=> {router.push('/')}
    })
  }
}

watch(user,(newValue,oldValue) => {
  !user.account ? noText.value = 'noText' : noText.value = false
  !user.password ? noPassword.value = 'noPassword' : noPassword.value = false
})
onMounted(() => {
  noText.value = 'noText'
  noPassword.value = 'noPassword'
})

</script>


<style scoped>

.mb-4{
  display: flex;
  justify-content:space-between;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.login-box .user-box label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
  top: -30px;
  left: 0;
  color: #03e9f4;
  font-size: 10px;
}
</style>